<div class="case-custom-fields" ng-controller="CaseCustomFieldsCtrl">
    <h4 class="vpad10 text-primary">
        Additional information
        <span uib-dropdown class="ml-m" ng-if="canEdit && customFieldsAvailable">
            <a href class="dropdown-toggle" uib-dropdown-toggle>
                <small><i class="fa fa-plus"></i> Add</small>
            </a>
            <ul class="dropdown-menu scroll-dropdown" uib-dropdown-menu>
                <li ng-repeat="key in keys(allCustomFields) | orderBy">
                    <a ng-click="addCustomField(allCustomFields[key])">{{allCustomFields[key].name}}</a>
                </li>
            </ul>
        </span>

        <span uib-dropdown class="ml-m">
            <a href class="dropdown-toggle" uib-dropdown-toggle>
                <small><i class="fa fa-columns"></i> Layout</small>
            </a>
            <ul class="dropdown-menu scroll-dropdown" uib-dropdown-menu>
                <li ng-class="{'active': appLayout.caseCustomFieldColumns === 1}">
                    <a ng-click="layoutSrv.caseCustomFields(1)">1 column</a>
                </li>
                <li ng-class="{'active': appLayout.caseCustomFieldColumns === 2}">
                    <a ng-click="layoutSrv.caseCustomFields(2)">2 columns</a>
                </li>
                <li ng-class="{'active': appLayout.caseCustomFieldColumns === 3}">
                    <a ng-click="layoutSrv.caseCustomFields(3)">3 columns</a>
                </li>
            </ul>
        </span>
    </h4>

    <div ng-if="caze.customFields.length === 0">
        <em>No additional information have been specified</em>
    </div>

    <div class="row">
        <div ng-repeat="customField in (caze.customFields | orderBy:'order') track by $index">
            <div class="clearfix" ng-if="$index % (appLayout.caseCustomFieldColumns || 3) == 0"></div>
            <div class="{{'col-xs-' + (12/(appLayout.caseCustomFieldColumns || 3))}}">
                <custom-field-input
                    index="$index"
                    editable="canEdit"
                    removable="canEdit"
                    field="customFieldsCache[customField.name]"
                    on-update="updateField(fieldName, value)"
                    on-remove="removeField(fieldId)"
                    value="customField.value"
                    id="customField._id"></custom-field-input>
            </div>
        </div>
    </div>
</div>
